<template>
      <div class="purchase-container" >
    <Header :title="post.title"></Header>
    <Search :item="searchItem"></Search>
    <main >
      <ul  @scroll="scrollEvt">
        <li v-for="it in list" :key="it.id" @scroll="scrollEvt" @click="toPage(it)">
          <span class="t">
            {{it.projectName}}
            <van-tag type="primary">{{it.state}}</van-tag>
          </span>
          <span>创建人：{{it.createName}}</span>
          <span>创建日期：{{it.createTime}}</span>
          <span>创建材料：{{it.materialName}}</span>
        </li>
        <li>
          <div v-if="loading" >
            <van-loading type="spinner" color="#10239e" class="tip">正在加载中</van-loading>
          </div>
          <div v-else-if="hasMore" class="loading" clear="tip">加载更多数据</div>
          <div v-else class="tip">没有更多数据</div>
        </li>
      </ul>
       
      
    </main>
  </div>
</template>

<script>
import Search from '@/components/Search.vue';
import Header from '@/components/header.vue';
import { purchaseListApi } from '@/api/purchase';
export default {
   data() {
      return {
         post: {
            id: 1,
            title: '采购管理',
         },
            loading:true,
            hasMore:true,// 是否有更多数据
            page: 1, // 当前加载第几页的数据
            list: [],//数据列表,
            projectName:'',//项目名称
            state:''//项目状态
      }
   },
   components: {
      Search,
      Header
   },
   created(){
     this.getList()
   },
   methods:{
      async getList() {
                // 这个接口只会返回当前页的数据，为了数据传输量小
                let result = await purchaseListApi({
                    projectName:this.projectName,
                    state:this.state,
                    page: this.page,
                    size: 8
                })
                if (result.code === 200) {
                    this.list = this.page === 1 ? result.data.rows : this.list.concat(result.data.rows)
                    this.hasMore = this.page * 8 < result.data.total
                }
                console.log(this.list,'xxxxxxxxxxxxxxxxxxxxxx  ');

               
                let _this = this
                setTimeout(function() {
                    _this.loading = false   // 因为数据赋值和页面渲染是异步
                })

            },
     // 页面滚动事件
        scrollEvt(evt) {
                // 实现一个加载节流的方法
                // 如果没有到底部不能加载，如果正在加载中不能去加载，如果没有更多数据不能去加载
                if (this.loading) return
                if (!this.hasMore) return
                // 是否到底部 -- 预留20个像素
                let isBottom = evt.target.scrollHeight - evt.target.clientHeight - evt.target.scrollTop < 32
                if (isBottom) {
                    // 修改加载状态
                    this.loading = true
                    // 要去加载下一页数据
                    this.page += 1
                    // 再去调用获取数据的方法
                    this.getList()
                }
   },
     //条件搜索
    searchItem(val){
       let {projectName,state} = val || {}
       this.projectName = projectName
       this.state = state
       this.list = []
       this.page = 1
       this.getList()
    },
    //详情页跳转
    toPage(params){
      this.$router.push({name:'purchaseDetail',params}) 
    }
}
}
</script>

<style lang="less" scoped>
@import "@/style/index.less";
.purchase-container{
   height: 100%;
   display: block;
}
main {
  display: block;
  height: calc(100% - 120px);
  > ul {
    list-style: none;
    display: block;
    height: 100%;
    padding: 0 10px;
    overflow-x: hidden;
    > li {
      display: block;
      border-bottom: solid 1px @c8;
      padding: 8px 6px;
      &:last-child {
        border-bottom: none;
      }
      > span {
        display: block;
        line-height: 24px;
        font-size: 0.65rem;
        color: @c7;
        &.t {
          color: #1e1e1e;
          font-size: 0.9rem;
          line-height: 32px;
        }
        > em {
          display: inline-block;
          color: @c2;
          font-size: 0.6rem;
          margin-left: 6px;
          font-style: normal;
        }
      }
    }
  }
  .loading{
   font-size: 16px;
   color: @c7;
  }
}        
.tip{
   font-size: 14px;
   text-align: center;
   color: #FA746B;
}
</style>